<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页表格测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1, h2 {
            color: #333;
            text-align: center;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        tr:hover {
            background-color: #e3f2fd;
        }
        
        .pagination {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
        }
        
        .pagination button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            margin: 0 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .pagination button:hover {
            background: #0056b3;
        }
        
        .pagination button:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        
        .pagination .current {
            background: #28a745;
        }
        
        .page-info {
            margin: 10px 0;
            color: #666;
            font-size: 14px;
        }
        
        .load-more {
            text-align: center;
            margin: 20px 0;
        }
        
        .load-more button {
            background: #17a2b8;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .load-more button:hover {
            background: #138496;
        }
        
        .section {
            margin: 40px 0;
            padding: 20px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Table Exporter 分页表格测试页面</h1>
        <p style="text-align: center; color: #666;">这个页面包含多种分页表格类型，用于测试 Table Exporter 的分页数据收集功能</p>
        
        <!-- 第一个表格：数字分页 -->
        <div class="section">
            <h2>员工信息表（数字分页）</h2>
            
            <table id="employeeTable">
                <thead>
                    <tr>
                        <th>员工ID</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>薪资</th>
                    </tr>
                </thead>
                <tbody id="employeeTableBody">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
            
            <div class="pagination" id="employeePagination">
                <div class="page-info" id="employeePageInfo"></div>
                <button onclick="goToPage(1)" id="firstPage">首页</button>
                <button onclick="previousPage()" id="prevPage">上一页</button>
                <span id="pageNumbers"></span>
                <button onclick="nextPage()" id="nextPage">下一页</button>
                <button onclick="goToPage(totalPages)" id="lastPage">尾页</button>
            </div>
        </div>
        
        <!-- 第二个表格：加载更多按钮 -->
        <div class="section">
            <h2>产品列表（加载更多）</h2>
            
            <table id="productTable">
                <thead>
                    <tr>
                        <th>产品ID</th>
                        <th>产品名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="productTableBody">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
            
            <div class="load-more">
                <button onclick="loadMoreProducts()" id="loadMoreBtn">加载更多产品</button>
                <div class="page-info" id="productInfo"></div>
            </div>
        </div>
        
        <!-- 第三个表格：简单的上一页/下一页 -->
        <div class="section">
            <h2>订单记录（上一页/下一页）</h2>
            
            <table id="orderTable">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>客户姓名</th>
                        <th>订单金额</th>
                        <th>订单状态</th>
                        <th>下单时间</th>
                    </tr>
                </thead>
                <tbody id="orderTableBody">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
            
            <div class="pagination" id="orderPagination">
                <div class="page-info" id="orderPageInfo"></div>
                <button onclick="previousOrderPage()" id="prevOrderPage">上一页</button>
                <button onclick="nextOrderPage()" id="nextOrderPage">下一页</button>
            </div>
        </div>
    </div>

    <script>
        // 员工数据（数字分页）
        let employeeData = [];
        let currentPage = 1;
        let pageSize = 5;
        let totalPages = 0;
        
        // 产品数据（加载更多）
        let productData = [];
        let loadedProducts = 0;
        let productPageSize = 3;
        
        // 订单数据（上一页/下一页）
        let orderData = [];
        let orderCurrentPage = 1;
        let orderPageSize = 4;
        let orderTotalPages = 0;
        
        // 初始化数据
        function initializeData() {
            // 生成员工数据
            for (let i = 1; i <= 25; i++) {
                employeeData.push({
                    id: `EMP${String(i).padStart(3, '0')}`,
                    name: `员工${i}`,
                    department: ['技术部', '销售部', '市场部', '人事部', '财务部'][Math.floor(Math.random() * 5)],
                    position: ['工程师', '主管', '经理', '专员', '总监'][Math.floor(Math.random() * 5)],
                    hireDate: `2023-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
                    salary: (Math.floor(Math.random() * 10000) + 5000) + '元'
                });
            }
            totalPages = Math.ceil(employeeData.length / pageSize);
            
            // 生成产品数据
            for (let i = 1; i <= 20; i++) {
                productData.push({
                    id: `PRD${String(i).padStart(3, '0')}`,
                    name: `产品${i}`,
                    category: ['电子产品', '服装', '家居用品', '食品', '图书'][Math.floor(Math.random() * 5)],
                    price: (Math.floor(Math.random() * 1000) + 50) + '元',
                    stock: Math.floor(Math.random() * 100),
                    status: ['在售', '缺货', '下架'][Math.floor(Math.random() * 3)]
                });
            }
            
            // 生成订单数据
            for (let i = 1; i <= 15; i++) {
                orderData.push({
                    orderNo: `ORD${String(i).padStart(6, '0')}`,
                    customer: `客户${i}`,
                    amount: (Math.floor(Math.random() * 5000) + 100) + '元',
                    status: ['待付款', '已付款', '已发货', '已完成', '已取消'][Math.floor(Math.random() * 5)],
                    createTime: `2024-01-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`
                });
            }
            orderTotalPages = Math.ceil(orderData.length / orderPageSize);
        }
        
        // 加载员工表格数据
        function loadEmployeeTable() {
            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            const pageData = employeeData.slice(startIndex, endIndex);
            
            const tbody = document.getElementById('employeeTableBody');
            tbody.innerHTML = '';
            
            pageData.forEach(employee => {
                const row = tbody.insertRow();
                row.insertCell(0).textContent = employee.id;
                row.insertCell(1).textContent = employee.name;
                row.insertCell(2).textContent = employee.department;
                row.insertCell(3).textContent = employee.position;
                row.insertCell(4).textContent = employee.hireDate;
                row.insertCell(5).textContent = employee.salary;
            });
            
            updateEmployeePagination();
        }
        
        // 更新员工分页控件
        function updateEmployeePagination() {
            document.getElementById('employeePageInfo').textContent = 
                `显示第 ${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, employeeData.length)} 条，共 ${employeeData.length} 条记录`;
            
            document.getElementById('firstPage').disabled = currentPage === 1;
            document.getElementById('prevPage').disabled = currentPage === 1;
            document.getElementById('nextPage').disabled = currentPage === totalPages;
            document.getElementById('lastPage').disabled = currentPage === totalPages;
            
            // 更新页码
            const pageNumbers = document.getElementById('pageNumbers');
            pageNumbers.innerHTML = '';
            
            for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
                const btn = document.createElement('button');
                btn.textContent = i;
                btn.onclick = () => goToPage(i);
                if (i === currentPage) {
                    btn.className = 'current';
                }
                pageNumbers.appendChild(btn);
            }
        }
        
        // 员工表格分页函数
        function goToPage(page) {
            if (page >= 1 && page <= totalPages) {
                currentPage = page;
                loadEmployeeTable();
            }
        }
        
        function nextPage() {
            if (currentPage < totalPages) {
                currentPage++;
                loadEmployeeTable();
            }
        }
        
        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                loadEmployeeTable();
            }
        }
        
        // 加载产品表格数据
        function loadProductTable() {
            const tbody = document.getElementById('productTableBody');
            
            for (let i = loadedProducts; i < Math.min(loadedProducts + productPageSize, productData.length); i++) {
                const product = productData[i];
                const row = tbody.insertRow();
                row.insertCell(0).textContent = product.id;
                row.insertCell(1).textContent = product.name;
                row.insertCell(2).textContent = product.category;
                row.insertCell(3).textContent = product.price;
                row.insertCell(4).textContent = product.stock;
                row.insertCell(5).textContent = product.status;
            }
            
            loadedProducts = Math.min(loadedProducts + productPageSize, productData.length);
            updateProductInfo();
        }
        
        // 加载更多产品
        function loadMoreProducts() {
            loadProductTable();
        }
        
        // 更新产品信息
        function updateProductInfo() {
            document.getElementById('productInfo').textContent = 
                `已加载 ${loadedProducts} / ${productData.length} 个产品`;
            
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            if (loadedProducts >= productData.length) {
                loadMoreBtn.textContent = '已加载全部产品';
                loadMoreBtn.disabled = true;
            }
        }
        
        // 加载订单表格数据
        function loadOrderTable() {
            const startIndex = (orderCurrentPage - 1) * orderPageSize;
            const endIndex = startIndex + orderPageSize;
            const pageData = orderData.slice(startIndex, endIndex);
            
            const tbody = document.getElementById('orderTableBody');
            tbody.innerHTML = '';
            
            pageData.forEach(order => {
                const row = tbody.insertRow();
                row.insertCell(0).textContent = order.orderNo;
                row.insertCell(1).textContent = order.customer;
                row.insertCell(2).textContent = order.amount;
                row.insertCell(3).textContent = order.status;
                row.insertCell(4).textContent = order.createTime;
            });
            
            updateOrderPagination();
        }
        
        // 更新订单分页控件
        function updateOrderPagination() {
            document.getElementById('orderPageInfo').textContent = 
                `第 ${orderCurrentPage} / ${orderTotalPages} 页`;
            
            document.getElementById('prevOrderPage').disabled = orderCurrentPage === 1;
            document.getElementById('nextOrderPage').disabled = orderCurrentPage === orderTotalPages;
        }
        
        // 订单表格分页函数
        function nextOrderPage() {
            if (orderCurrentPage < orderTotalPages) {
                orderCurrentPage++;
                loadOrderTable();
            }
        }
        
        function previousOrderPage() {
            if (orderCurrentPage > 1) {
                orderCurrentPage--;
                loadOrderTable();
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeData();
            loadEmployeeTable();
            loadProductTable();
            loadOrderTable();
        });
    </script>
</body>
</html>